<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监控大屏演示 v2.0 - CodeSpirit Amis Cards</title>
    
    <!-- 本地 Amis CSS（参考 _Layout.cshtml 的方式）-->
    <link rel="stylesheet" href="/sdk/6.12.0/antd.css">
    <link rel="stylesheet" href="/sdk/6.12.0/helper.css">
    <link rel="stylesheet" href="/sdk/6.12.0/iconfont.css">
    
    <!-- AmisCards CSS -->
    <link rel="stylesheet" href="../styles/amis-cards.css">
    <link rel="stylesheet" href="../styles/themes/default.css">
    <link rel="stylesheet" href="../styles/themes/dark.css">
    
    <!-- 考试监控样式 -->
    <link rel="stylesheet" href="../../css/exam/exam-monitor.css">
    
    <style>
        /* ========== 小清新主题美化样式 ========== */
        
        * {
            box-sizing: border-box;
        }
        
        body {
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 35%, #f093fb 100%);
            min-height: 100vh;
            position: relative;
            overflow-x: hidden;
        }
        
        /* 背景装饰动画 */
        body::before {
            content: '';
            position: fixed;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
                        radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
                        radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%);
            animation: float 20s ease-in-out infinite;
            pointer-events: none;
            z-index: -1;
        }
        
        @keyframes float {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            33% { transform: translate(30px, -30px) rotate(120deg); }
            66% { transform: translate(-20px, 20px) rotate(240deg); }
        }
        
        /* 头部区域美化 */
        .monitor-header {
            background: rgba(255, 255, 255, 0.95);
            padding: 2rem 2.5rem;
            backdrop-filter: blur(20px);
            box-shadow: 
                0 8px 32px rgba(31, 38, 135, 0.37),
                0 2px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 2rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
            position: relative;
            overflow: hidden;
        }
        
        .monitor-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, 
                #667eea 0%, 
                #764ba2 25%, 
                #f093fb 50%, 
                #764ba2 75%, 
                #667eea 100%);
            animation: shimmer 3s ease-in-out infinite;
        }
        
        @keyframes shimmer {
            0%, 100% { opacity: 0.8; }
            50% { opacity: 1; }
        }
        
        .monitor-title {
            margin: 0;
            color: #2c3e50;
            font-size: 2.5rem;
            font-weight: 800;
            display: flex;
            align-items: center;
            gap: 1.5rem;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            letter-spacing: -0.5px;
        }
        
        .monitor-title i {
            background: linear-gradient(135deg, #667eea, #764ba2);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 2.5rem;
            animation: pulse-icon 2s ease-in-out infinite;
        }
        
        @keyframes pulse-icon {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
        
        .monitor-subtitle {
            margin: 1rem 0 0 0;
            color: #34495e;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 1.5rem;
            font-weight: 500;
            line-height: 1.6;
        }
        
        .monitor-subtitle .feature-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 20px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .monitor-subtitle .feature-item:hover {
            transform: translateY(-2px);
            background: rgba(255, 255, 255, 0.8);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        
        .monitor-subtitle i {
            color: #667eea;
            font-size: 1rem;
        }
        
        /* 控制面板美化 */
        .monitor-controls {
            background: rgba(255, 255, 255, 0.92);
            padding: 2rem 2.5rem;
            margin: 0 2rem 2rem 2rem;
            border-radius: 20px;
            backdrop-filter: blur(20px);
            box-shadow: 
                0 8px 32px rgba(31, 38, 135, 0.37),
                0 2px 8px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            position: relative;
        }
        
        .controls-title {
            color: #2c3e50;
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .controls-title i {
            color: #667eea;
            font-size: 1.2rem;
        }
        
        .controls-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 1rem;
            margin-bottom: 1.5rem;
        }
        
        .controls-row {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            align-items: center;
        }
        
        .monitor-controls button {
            padding: 0.875rem 1.75rem;
            border: 1px solid rgba(102, 126, 234, 0.3);
            border-radius: 25px;
            background: rgba(255, 255, 255, 0.8);
            color: #2c3e50;
            cursor: pointer;
            font-weight: 600;
            font-size: 0.9rem;
            position: relative;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(10px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .monitor-controls button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transition: left 0.5s;
        }
        
        .monitor-controls button:hover::before {
            left: 100%;
        }
        
        .monitor-controls button:hover {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: #ffffff;
            border-color: transparent;
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
        }
        
        .monitor-controls button.active {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: #ffffff;
            border-color: transparent;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }
        
        .monitor-controls button i {
            margin-right: 0.5rem;
            transition: transform 0.3s ease;
        }
        
        .monitor-controls button:hover i {
            transform: scale(1.1);
        }
        
        /* 监控容器美化 */
        #monitor-container {
            min-height: 400px;
            padding: 0 2rem;
            position: relative;
        }
        
        /* 加载状态美化 */
        .loading {
            text-align: center;
            padding: 4rem 2rem;
            color: #ffffff;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 20px;
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
        }
        
        .loading i {
            font-size: 3.5rem;
            margin-bottom: 1.5rem;
            background: linear-gradient(135deg, #ffffff, #f8f9fa);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: loading-spin 1.5s linear infinite;
        }
        
        @keyframes loading-spin {
            to { transform: rotate(360deg); }
        }
        
        .loading-text {
            font-size: 1.2rem;
            font-weight: 600;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        /* 错误状态美化 */
        .error-container {
            text-align: center;
            padding: 4rem 2rem;
            color: #ffffff;
            background: rgba(220, 53, 69, 0.9);
            border-radius: 20px;
            backdrop-filter: blur(20px);
            border: 1px solid rgba(220, 53, 69, 0.5);
            box-shadow: 0 8px 32px rgba(220, 53, 69, 0.3);
        }
        
        .error-container i {
            font-size: 3.5rem;
            margin-bottom: 1.5rem;
            animation: shake 0.5s ease-in-out;
        }
        
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-10px); }
            75% { transform: translateX(10px); }
        }
        
        .error-container button {
            padding: 1rem 2rem;
            background: #ffffff;
            color: #dc3545;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            font-weight: 700;
            font-size: 1rem;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }
        
        .error-container button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }
        
        /* 暗色主题适配 */
        .amis-cards-theme-dark .monitor-header {
            background: rgba(44, 62, 80, 0.95);
            border-bottom-color: rgba(255, 255, 255, 0.1);
        }
        
        .amis-cards-theme-dark .monitor-title {
            color: #ecf0f1;
        }
        
        .amis-cards-theme-dark .monitor-title i {
            background: linear-gradient(135deg, #74b9ff, #a29bfe);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .amis-cards-theme-dark .monitor-subtitle {
            color: #bdc3c7;
        }
        
        .amis-cards-theme-dark .monitor-subtitle .feature-item {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.2);
        }
        
        .amis-cards-theme-dark .monitor-subtitle .feature-item:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        
        .amis-cards-theme-dark .monitor-controls {
            background: rgba(52, 73, 94, 0.92);
            border-color: rgba(255, 255, 255, 0.1);
        }
        
        .amis-cards-theme-dark .controls-title {
            color: #ecf0f1;
        }
        
        .amis-cards-theme-dark .monitor-controls button {
            background: rgba(69, 90, 120, 0.8);
            color: #ecf0f1;
            border-color: rgba(116, 185, 255, 0.3);
        }
        
        .amis-cards-theme-dark .monitor-controls button:hover {
            background: linear-gradient(135deg, #74b9ff, #a29bfe);
            color: #ffffff;
        }
        
        .amis-cards-theme-dark .monitor-controls button.active {
            background: linear-gradient(135deg, #74b9ff, #a29bfe);
            color: #ffffff;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .monitor-header {
                padding: 1.5rem;
            }
            
            .monitor-title {
                font-size: 2rem;
                flex-direction: column;
                text-align: center;
                gap: 1rem;
            }
            
            .monitor-subtitle {
                justify-content: center;
                font-size: 1rem;
            }
            
            .monitor-subtitle .feature-item {
                padding: 0.4rem 0.8rem;
                font-size: 0.9rem;
            }
            
            .monitor-controls {
                margin: 0 1rem 2rem 1rem;
                padding: 1.5rem;
            }
            
            .controls-grid {
                grid-template-columns: 1fr;
            }
            
            .controls-row {
                justify-content: center;
            }
            
            .monitor-controls button {
                padding: 0.75rem 1.25rem;
                font-size: 0.85rem;
            }
            
            #monitor-container {
                padding: 0 1rem;
            }
        }
        
        @media (max-width: 480px) {
            .monitor-title {
                font-size: 1.75rem;
            }
            
            .monitor-title i {
                font-size: 2rem;
            }
            
            .monitor-subtitle .feature-item {
                padding: 0.3rem 0.6rem;
                font-size: 0.8rem;
            }
            
            .controls-row {
                flex-direction: column;
            }
            
            .monitor-controls button {
                width: 100%;
                margin-bottom: 0.5rem;
            }
        }
    </style>
</head>
<body>
    <!-- 监控大屏头部 -->
    <div class="monitor-header">
        <h1 class="monitor-title">
            <i class="fa fa-desktop"></i>
            考试监控大屏演示 v2.0
        </h1>
        <div class="monitor-subtitle">
            <div class="feature-item">
                <i class="fa fa-chart-line"></i>
                <span>实时监控考试进度</span>
            </div>
            <div class="feature-item">
                <i class="fa fa-shield-alt"></i>
                <span>智能防作弊检测</span>
            </div>
            <div class="feature-item">
                <i class="fa fa-chart-bar"></i>
                <span>数据可视化分析</span>
            </div>
            <div class="feature-item">
                <i class="fa fa-mobile-alt"></i>
                <span>响应式设计</span>
            </div>
        </div>
    </div>
    
    <!-- 监控控制面板 -->
    <div class="monitor-controls">
        <div class="controls-title">
            <i class="fa fa-cogs"></i>
            监控场景切换
        </div>
        <div class="controls-grid">
            <div class="controls-row">
                <button onclick="loadExamMonitorDemo()" class="active">
                    <i class="fa fa-graduation-cap"></i>考试监控信息
                </button>
                <button onclick="loadSystemStatusDemo()">
                    <i class="fa fa-server"></i>系统状态监控
                </button>
            </div>
            <div class="controls-row">
                <button onclick="loadResourceMonitorDemo()">
                    <i class="fa fa-chart-area"></i>资源使用监控
                </button>
                <button onclick="loadSecurityMonitorDemo()">
                    <i class="fa fa-shield-alt"></i>安全监控面板
                </button>
            </div>
        </div>
        <div class="controls-title">
            <i class="fa fa-tools"></i>
            系统控制
        </div>
        <div class="controls-row">
            <button onclick="toggleMonitorTheme()">
                <i class="fa fa-palette"></i>切换主题
            </button>
            <button onclick="startAutoRefresh()">
                <i class="fa fa-sync-alt"></i>开始自动刷新
            </button>
            <button onclick="stopAutoRefresh()">
                <i class="fa fa-stop"></i>停止刷新
            </button>
        </div>
    </div>
    
    <!-- 监控容器 -->
    <div id="monitor-container">
        <div class="loading">
            <div><i class="fa fa-spinner"></i></div>
            <div class="loading-text">正在加载监控数据...</div>
        </div>
    </div>
    
    <!-- 本地 Amis JavaScript-->
    <script src="/sdk/6.12.0/sdk.js"></script>
    
    <!-- AmisCards JavaScript -->
    <script src="../core/utils.js"></script>
    <script src="../core/data-service.js"></script>
    <script src="../core/amis-cards-core.js"></script>
    <script src="../renderers/base-renderer.js"></script>
    <script src="../renderers/stat-renderer.js"></script>
    <script src="../renderers/chart-renderer.js"></script>
    <script src="../renderers/table-renderer.js"></script>
    <script src="../renderers/info-renderer.js"></script>
    <script src="../renderers/info-grid-renderer.js"></script>
    <script src="../configs/card-configs.js"></script>
    <script src="../configs/theme-configs.js"></script>
    
    <script>
        // 全局变量
        let monitorInstance = null;
        let currentTheme = 'default';
        let refreshTimer = null;
        
        // 模拟数据
        const mockExamData = {
            examId: 'EX001',
            examName: 'CodeSpirit 监考大屏 v2.0',
            tenantName: 'CodeSpirit 教育',
            totalParticipants: 145,
            onlineCount: 138,
            submittedCount: 32,
            suspiciousCount: 5,
            students: generateMockStudents(145)
        };
        
        /**
         * 生成模拟学生数据
         */
        function generateMockStudents(count) {
            const students = [];
            const names = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十'];
            const statuses = ['考试中', '已提交', '未开始'];
            
            for (let i = 1; i <= count; i++) {
                const randomName = names[Math.floor(Math.random() * names.length)];
                const studentNumber = `STU${String(i).padStart(4, '0')}`;
                const status = statuses[Math.floor(Math.random() * statuses.length)];
                const progress = Math.floor(Math.random() * 100);
                const switchCount = Math.floor(Math.random() * 10);
                
                students.push({
                    id: i,
                    name: `${randomName}${i}`,
                    studentNumber: studentNumber,
                    ipAddress: `192.168.1.${100 + (i % 155)}`,
                    status: status,
                    progress: progress,
                    screenSwitchCount: switchCount,
                    startTime: new Date(Date.now() - Math.random() * 3600000).toISOString(),
                    deviceInfo: `Windows 10 Chrome ${90 + Math.floor(Math.random() * 10)}`
                });
            }
            
            return students;
        }
        
        /**
         * 初始化监控演示
         */
        function initMonitorDemo() {
            try {
                console.log('[监控演示 v2.0] 开始初始化');
                
                // 创建 AmisCards 实例
                monitorInstance = window.AmisCards.create({
                    container: '#monitor-container',
                    theme: currentTheme,
                    config: {
                        pageTitle: '监控大屏演示 v2.0'
                    }
                });
                
                // 注册渲染器
                registerRenderers();
                
                // 等待实例准备就绪后加载默认演示
                setTimeout(() => {
                    loadExamMonitorDemo();
                }, 100);
                
                console.log('[监控演示 v2.0] 初始化完成');
                
            } catch (error) {
                console.error('[监控演示 v2.0] 初始化失败:', error);
                showError('初始化失败', error.message);
            }
        }
        
        /**
         * 注册渲染器
         */
        function registerRenderers() {
            const renderers = [
                { type: 'stat', renderer: window.AmisCards.StatRenderer },
                { type: 'chart', renderer: window.AmisCards.ChartRenderer },
                { type: 'table', renderer: window.AmisCards.TableRenderer },
                { type: 'info', renderer: window.AmisCards.InfoRenderer },
                { type: 'info-grid', renderer: window.AmisCards.InfoGridRenderer }
            ];
            
            renderers.forEach(({ type, renderer }) => {
                if (renderer) {
                    monitorInstance.registerRenderer(type, renderer);
                    console.log(`[监控演示 v2.0] 已注册 ${type} 渲染器`);
                } else {
                    console.warn(`[监控演示 v2.0] ${type} 渲染器未找到`);
                }
            });
        }
        
        /**
         * 加载考试监控演示
         */
        async function loadExamMonitorDemo() {
            console.log('[监控演示 v2.0] 加载考试监控演示');
            setActiveButton(0);
            
            // 计算统计数据
            const examingCount = mockExamData.students.filter(s => s.status === '考试中').length;
            const avgProgress = Math.round(mockExamData.students.reduce((sum, s) => sum + s.progress, 0) / mockExamData.students.length);
            const highSwitchCount = mockExamData.students.filter(s => s.screenSwitchCount > 5).length;
            
            const cards = [
                // 考试监控信息网格
                {
                    id: 'exam-info-grid',
                    type: 'info-grid',
                    title: '考试基本信息',
                    subtitle: '实时更新的考试概览数据',
                    theme: 'info',
                    grid: {
                        columns: 'auto-fit',
                        minItemWidth: '180px',
                        gap: '1.25rem'
                    },
                    items: [
                        {
                            label: '考试编号',
                            value: mockExamData.examId,
                            icon: 'id-card',
                            iconColor: '#9b59b6'
                        },
                        {
                            label: '学校机构',
                            value: mockExamData.tenantName,
                            icon: 'university',
                            iconColor: '#f39c12'
                        },
                        {
                            label: '考试状态',
                            value: '进行中',
                            icon: 'play-circle',
                            iconColor: '#27ae60',
                            highlight: false
                        },
                        {
                            label: '在线情况',
                            value: `${mockExamData.onlineCount}/${mockExamData.totalParticipants}`,
                            icon: 'users',
                            iconColor: '#e67e22',
                            highlight: true
                        },
                        {
                            label: '开始时间',
                            value: '2025-01-15 14:00:00',
                            icon: 'play-circle',
                            iconColor: '#27ae60'
                        },
                        {
                            label: '结束时间',
                            value: '2025-01-15 16:00:00',
                            icon: 'stop-circle',
                            iconColor: '#e74c3c'
                        },
                        {
                            label: '考试时长',
                            value: '120分钟',
                            icon: 'hourglass-half',
                            iconColor: '#f1c40f'
                        },
                        {
                            label: '最近更新',
                            value: new Date().toLocaleTimeString(),
                            icon: 'sync-alt',
                            iconColor: '#16a085'
                        }
                    ]
                },
                // 考试统计卡片
                {
                    id: 'total-participants',
                    type: 'stat',
                    title: '参考人数',
                    subtitle: '考试总体参与统计',
                    theme: 'info',
                    data: {
                        value: mockExamData.totalParticipants,
                        label: '总人数',
                        unit: '人',
                        formatter: 'integer',
                        icon: 'users',
                        iconColor: '#17a2b8',
                        iconSize: 'lg',
                        iconPosition: 'left',
                        iconBackground: 'rgba(23, 162, 184, 0.1)',
                        iconBorder: true
                    }
                },
                {
                    id: 'online-count',
                    type: 'stat',
                    title: '在线人数',
                    subtitle: '实时在线统计',
                    theme: 'success',
                    data: {
                        value: mockExamData.onlineCount,
                        label: '在线',
                        unit: '人',
                        formatter: 'integer',
                        target: mockExamData.totalParticipants,
                        showProgress: true,
                        icon: 'wifi',
                        iconColor: '#28a745',
                        iconSize: 'lg',
                        iconPosition: 'left',
                        iconBackground: 'rgba(40, 167, 69, 0.1)',
                        iconBorder: true,
                        description: `在线率: ${Math.round(mockExamData.onlineCount/mockExamData.totalParticipants*100)}%`
                    }
                },
                {
                    id: 'submitted-count',
                    type: 'stat',
                    title: '已交卷',
                    subtitle: '提交情况统计',
                    theme: 'warning',
                    data: {
                        value: mockExamData.submittedCount,
                        label: '已提交',
                        unit: '人',
                        formatter: 'integer',
                        target: mockExamData.totalParticipants,
                        showProgress: true,
                        icon: 'check-circle',
                        iconColor: '#ffc107',
                        iconSize: 'lg',
                        iconPosition: 'left',
                        iconBackground: 'rgba(255, 193, 7, 0.1)',
                        iconBorder: true,
                        description: `提交率: ${Math.round(mockExamData.submittedCount/mockExamData.totalParticipants*100)}%`
                    }
                },
                {
                    id: 'suspicious-count',
                    type: 'stat',
                    title: '风险预警',
                    subtitle: '异常行为检测',
                    theme: 'danger',
                    data: {
                        value: mockExamData.suspiciousCount,
                        label: '风险用户',
                        unit: '人',
                        formatter: 'integer',
                        icon: 'exclamation-triangle',
                        iconColor: '#dc3545',
                        iconSize: 'lg',
                        iconPosition: 'left',
                        iconBackground: 'rgba(220, 53, 69, 0.1)',
                        iconBorder: true,
                        description: mockExamData.suspiciousCount > 0 ? '需要关注异常行为' : '暂无异常'
                    }
                },
                
                // 考生监控表格
                {
                    id: 'students-table',
                    type: 'table',
                    title: '考生监控',
                    subtitle: '实时监控考生状态和答题进度',
                    theme: 'primary',
                    columns: [
                        {
                            name: 'name',
                            label: '姓名',
                            width: 100,
                            type: 'text'
                        },
                        {
                            name: 'studentNumber',
                            label: '学号',
                            width: 120,
                            type: 'text'
                        },
                        {
                            name: 'ipAddress',
                            label: 'IP地址',
                            width: 130,
                            type: 'text'
                        },
                        {
                            name: 'status',
                            label: '状态',
                            width: 100,
                            type: 'mapping',
                            map: {
                                '考试中': '<span class="label label-info">考试中</span>',
                                '已提交': '<span class="label label-success">已提交</span>',
                                '未开始': '<span class="label label-secondary">未开始</span>'
                            }
                        },
                        {
                            name: 'progress',
                            label: '进度',
                            width: 120,
                            type: 'progress',
                            showLabel: true,
                            stripe: true
                        },
                        {
                            name: 'screenSwitchCount',
                            label: '切屏次数',
                            width: 100,
                            type: 'text',
                            className: '${screenSwitchCount > 5 ? "text-danger" : screenSwitchCount > 2 ? "text-warning" : "text-success"}'
                        },
                        {
                            name: 'startTime',
                            label: '开始时间',
                            width: 160,
                            type: 'datetime',
                            format: 'MM-DD HH:mm'
                        }
                    ],
                    data: {
                        items: mockExamData.students.slice(0, 15), // 显示前15个学生
                        total: mockExamData.students.length
                    },
                    showPager: true,
                    pageSize: 15
                }
            ];
            
            await monitorInstance.render(cards);
        }
        
        /**
         * 加载系统状态监控演示
         */
        async function loadSystemStatusDemo() {
            console.log('[监控演示 v2.0] 加载系统状态监控演示');
            setActiveButton(1);
            
            // 生成系统服务数据
            const systemServices = [
                { name: 'IdentityApi', status: '运行中', port: 8001, cpu: '12%', memory: '256MB', uptime: '15天' },
                { name: 'ExamApi', status: '运行中', port: 8002, cpu: '18%', memory: '512MB', uptime: '15天' },
                { name: 'ConfigCenter', status: '运行中', port: 8003, cpu: '8%', memory: '128MB', uptime: '15天' },
                { name: 'MessagingApi', status: '运行中', port: 8004, cpu: '15%', memory: '384MB', uptime: '15天' },
                { name: 'Web', status: '运行中', port: 8000, cpu: '22%', memory: '768MB', uptime: '15天' },
                { name: 'Database', status: '运行中', port: 5432, cpu: '25%', memory: '1.2GB', uptime: '30天' },
                { name: 'Redis', status: '运行中', port: 6379, cpu: '5%', memory: '64MB', uptime: '30天' },
                { name: 'RabbitMQ', status: '运行中', port: 5672, cpu: '8%', memory: '256MB', uptime: '30天' }
            ];
            
            const cards = [
                // 系统状态信息网格
                {
                    id: 'system-status-grid',
                    type: 'info-grid',
                    title: '系统运行状态',
                    subtitle: '服务器健康状况实时监控',
                    theme: 'success',
                    grid: {
                        columns: 4,
                        gap: '1.5rem'
                    },
                    items: [
                        {
                            label: '系统版本',
                            value: 'CodeSpirit v2.0',
                            icon: 'code-branch',
                            iconColor: '#3498db'
                        },
                        {
                            label: '运行环境',
                            value: '.NET 9.0',
                            icon: 'server',
                            iconColor: '#9b59b6'
                        },
                        {
                            label: '运行时长',
                            value: '15天 8小时',
                            icon: 'clock',
                            iconColor: '#f39c12'
                        },
                        {
                            label: '系统状态',
                            value: '正常运行',
                            icon: 'check-circle',
                            iconColor: '#27ae60',
                            highlight: false
                        }
                    ]
                },
                // 系统统计卡片
                {
                    id: 'active-sessions',
                    type: 'stat',
                    title: '活跃会话',
                    subtitle: '当前在线用户数',
                    theme: 'primary',
                    data: {
                        value: 1337,
                        label: '在线用户',
                        unit: '个',
                        formatter: 'integer',
                        icon: 'wifi',
                        iconColor: '#007bff',
                        iconSize: 'lg',
                        iconBackground: 'rgba(0, 123, 255, 0.1)'
                    }
                },
                {
                    id: 'request-count',
                    type: 'stat',
                    title: '请求处理',
                    subtitle: '每分钟请求数',
                    theme: 'info',
                    data: {
                        value: 2580,
                        label: '请求/分钟',
                        formatter: 'integer',
                        icon: 'exchange-alt',
                        iconColor: '#17a2b8',
                        iconSize: 'lg',
                        iconBackground: 'rgba(23, 162, 184, 0.1)'
                    }
                },
                {
                    id: 'error-rate',
                    type: 'stat',
                    title: '错误率',
                    subtitle: '24小时错误统计',
                    theme: 'warning',
                    data: {
                        value: 0.05,
                        label: '错误率',
                        formatter: 'percentage',
                        icon: 'exclamation-triangle',
                        iconColor: '#ffc107',
                        iconSize: 'lg',
                        iconBackground: 'rgba(255, 193, 7, 0.1)'
                    }
                },
                
                // 系统服务监控表格
                {
                    id: 'services-table',
                    type: 'table',
                    title: '系统服务监控',
                    subtitle: '微服务架构各组件运行状态',
                    theme: 'success',
                    columns: [
                        {
                            name: 'name',
                            label: '服务名称',
                            width: 120,
                            type: 'text'
                        },
                        {
                            name: 'status',
                            label: '状态',
                            width: 100,
                            type: 'mapping',
                            map: {
                                '运行中': '<span class="label label-success">运行中</span>',
                                '停止': '<span class="label label-danger">停止</span>',
                                '维护中': '<span class="label label-warning">维护中</span>'
                            }
                        },
                        {
                            name: 'port',
                            label: '端口',
                            width: 80,
                            type: 'text'
                        },
                        {
                            name: 'cpu',
                            label: 'CPU使用率',
                            width: 100,
                            type: 'text',
                            className: '${cpu.replace("%", "") > 80 ? "text-danger" : cpu.replace("%", "") > 50 ? "text-warning" : "text-success"}'
                        },
                        {
                            name: 'memory',
                            label: '内存使用',
                            width: 100,
                            type: 'text'
                        },
                        {
                            name: 'uptime',
                            label: '运行时长',
                            width: 100,
                            type: 'text'
                        }
                    ],
                    data: {
                        items: systemServices,
                        total: systemServices.length
                    },
                    showPager: false
                }
            ];
            
            await monitorInstance.render(cards);
        }
        
        /**
         * 加载资源使用监控演示
         */
        async function loadResourceMonitorDemo() {
            console.log('[监控演示 v2.0] 加载资源使用监控演示');
            setActiveButton(2);
            
            // 生成资源使用详细数据
            const resourceDetails = [
                { resource: 'CPU Core 1', usage: '68%', status: '正常', load: '中等', temperature: '62°C' },
                { resource: 'CPU Core 2', usage: '72%', status: '正常', load: '中等', temperature: '64°C' },
                { resource: 'CPU Core 3', usage: '58%', status: '正常', load: '轻量', temperature: '60°C' },
                { resource: 'CPU Core 4', usage: '65%', status: '正常', load: '中等', temperature: '63°C' },
                { resource: '内存 Bank 1', usage: '45%', status: '正常', load: '中等', temperature: '45°C' },
                { resource: '内存 Bank 2', usage: '56%', status: '正常', load: '中等', temperature: '47°C' },
                { resource: '系统盘 SSD', usage: '48%', status: '健康', load: '轻量', temperature: '42°C' },
                { resource: '数据盘 HDD', usage: '52%', status: '健康', load: '中等', temperature: '38°C' },
                { resource: '网卡 eth0', usage: '12%', status: '正常', load: '轻量', temperature: '35°C' },
                { resource: 'GPU 显存', usage: '25%', status: '正常', load: '轻量', temperature: '55°C' }
            ];
            
            const cards = [
                // 资源使用信息网格
                {
                    id: 'resource-status-grid',
                    type: 'info-grid',
                    title: '服务器资源使用情况',
                    subtitle: '实时监控系统资源占用',
                    theme: 'warning',
                    grid: {
                        columns: 3,
                        gap: '2rem'
                    },
                    items: [
                        {
                            label: 'CPU 使用率',
                            value: '65.8%',
                            icon: 'microchip',
                            iconColor: '#e67e22',
                            description: '当前负载较高，需要关注',
                            highlight: true
                        },
                        {
                            label: '内存使用',
                            value: '8.2GB',
                            unit: ' / 16GB',
                            icon: 'memory',
                            iconColor: '#3498db',
                            description: '使用率 51%，运行正常'
                        },
                        {
                            label: '磁盘空间',
                            value: '256GB',
                            unit: ' / 512GB',
                            icon: 'hdd',
                            iconColor: '#27ae60',
                            description: '剩余空间充足'
                        },
                        {
                            label: '网络带宽',
                            value: '125MB/s',
                            unit: ' / 1GB/s',
                            icon: 'wifi',
                            iconColor: '#17a2b8',
                            description: '网络连接正常'
                        },
                        {
                            label: '数据库连接',
                            value: '45',
                            unit: ' / 100',
                            icon: 'database',
                            iconColor: '#9b59b6',
                            description: '连接池使用正常'
                        },
                        {
                            label: '缓存命中率',
                            value: '89.6%',
                            icon: 'tachometer-alt',
                            iconColor: '#f39c12',
                            description: '缓存性能良好'
                        }
                    ]
                },
                
                // 详细资源监控表格
                {
                    id: 'resource-details-table',
                    type: 'table',
                    title: '详细资源监控',
                    subtitle: '系统各组件资源使用详情',
                    theme: 'warning',
                    columns: [
                        {
                            name: 'resource',
                            label: '资源组件',
                            width: 120,
                            type: 'text'
                        },
                        {
                            name: 'usage',
                            label: '使用率',
                            width: 100,
                            type: 'text',
                            className: '${usage.replace("%", "") > 80 ? "text-danger" : usage.replace("%", "") > 60 ? "text-warning" : "text-success"}'
                        },
                        {
                            name: 'status',
                            label: '状态',
                            width: 100,
                            type: 'mapping',
                            map: {
                                '正常': '<span class="label label-success">正常</span>',
                                '健康': '<span class="label label-info">健康</span>',
                                '警告': '<span class="label label-warning">警告</span>',
                                '异常': '<span class="label label-danger">异常</span>'
                            }
                        },
                        {
                            name: 'load',
                            label: '负载等级',
                            width: 100,
                            type: 'mapping',
                            map: {
                                '轻量': '<span class="label label-success">轻量</span>',
                                '中等': '<span class="label label-warning">中等</span>',
                                '重载': '<span class="label label-danger">重载</span>'
                            }
                        },
                        {
                            name: 'temperature',
                            label: '温度',
                            width: 80,
                            type: 'text',
                            className: '${temperature.replace("°C", "") > 70 ? "text-danger" : temperature.replace("°C", "") > 50 ? "text-warning" : "text-success"}'
                        }
                    ],
                    data: {
                        items: resourceDetails,
                        total: resourceDetails.length
                    },
                    showPager: true,
                    pageSize: 8
                }
            ];
            
            await monitorInstance.render(cards);
        }
        
        /**
         * 加载安全监控演示
         */
        async function loadSecurityMonitorDemo() {
            console.log('[监控演示 v2.0] 加载安全监控演示');
            setActiveButton(3);
            
            // 生成安全事件数据
            const securityEvents = [
                { 
                    time: new Date(Date.now() - 300000).toLocaleString(), 
                    type: '登录异常', 
                    severity: '高', 
                    source: '192.168.1.100', 
                    description: '异地登录尝试',
                    status: '已处理'
                },
                { 
                    time: new Date(Date.now() - 600000).toLocaleString(), 
                    type: 'SQL注入', 
                    severity: '高', 
                    source: '203.45.67.89', 
                    description: '尝试SQL注入攻击',
                    status: '已拦截'
                },
                { 
                    time: new Date(Date.now() - 900000).toLocaleString(), 
                    type: 'XSS攻击', 
                    severity: '中', 
                    source: '124.56.78.90', 
                    description: '跨站脚本攻击尝试',
                    status: '已拦截'
                },
                { 
                    time: new Date(Date.now() - 1200000).toLocaleString(), 
                    type: '暴力破解', 
                    severity: '中', 
                    source: '180.23.45.67', 
                    description: '密码暴力破解',
                    status: '已拦截'
                },
                { 
                    time: new Date(Date.now() - 1500000).toLocaleString(), 
                    type: '文件上传', 
                    severity: '低', 
                    source: '192.168.1.88', 
                    description: '可疑文件上传',
                    status: '已扫描'
                },
                { 
                    time: new Date(Date.now() - 1800000).toLocaleString(), 
                    type: 'DDoS攻击', 
                    severity: '高', 
                    source: '多个IP', 
                    description: '分布式拒绝服务攻击',
                    status: '已拦截'
                },
                { 
                    time: new Date(Date.now() - 2100000).toLocaleString(), 
                    type: '权限提升', 
                    severity: '高', 
                    source: '内部网络', 
                    description: '异常权限提升尝试',
                    status: '待处理'
                },
                { 
                    time: new Date(Date.now() - 2400000).toLocaleString(), 
                    type: '端口扫描', 
                    severity: '中', 
                    source: '89.12.34.56', 
                    description: '系统端口扫描',
                    status: '已记录'
                }
            ];
            
            const cards = [
                // 安全状态信息网格
                {
                    id: 'security-status-grid',
                    type: 'info-grid',
                    title: '系统安全状态',
                    subtitle: '实时安全威胁监控与防护状态',
                    theme: 'danger',
                    grid: {
                        columns: 'auto-fit',
                        minItemWidth: '200px',
                        gap: '1.5rem'
                    },
                    items: [
                        {
                            label: '防火墙状态',
                            value: '启用',
                            icon: 'shield-alt',
                            iconColor: '#27ae60',
                            description: '所有规则正常工作'
                        },
                        {
                            label: '恶意攻击拦截',
                            value: '42',
                            unit: '次/小时',
                            icon: 'ban',
                            iconColor: '#e74c3c',
                            description: '检测到攻击尝试',
                            highlight: true
                        },
                        {
                            label: 'SSL证书状态',
                            value: '有效',
                            icon: 'lock',
                            iconColor: '#27ae60',
                            description: '证书将于60天后过期'
                        },
                        {
                            label: '异常登录检测',
                            value: '3',
                            unit: '次',
                            icon: 'user-shield',
                            iconColor: '#f39c12',
                            description: '发现可疑登录行为',
                            highlight: true
                        },
                        {
                            label: '数据备份状态',
                            value: '正常',
                            icon: 'cloud-upload-alt',
                            iconColor: '#17a2b8',
                            description: '最后备份：2小时前'
                        },
                        {
                            label: '系统漏洞扫描',
                            value: '已完成',
                            icon: 'search',
                            iconColor: '#6c757d',
                            description: '未发现高危漏洞'
                        }
                    ]
                },
                
                // 安全事件监控表格
                {
                    id: 'security-events-table',
                    type: 'table',
                    title: '安全事件监控',
                    subtitle: '实时安全威胁和攻击事件记录',
                    theme: 'danger',
                    columns: [
                        {
                            name: 'time',
                            label: '发生时间',
                            width: 140,
                            type: 'text'
                        },
                        {
                            name: 'type',
                            label: '事件类型',
                            width: 100,
                            type: 'text'
                        },
                        {
                            name: 'severity',
                            label: '严重等级',
                            width: 100,
                            type: 'mapping',
                            map: {
                                '高': '<span class="label label-danger">高</span>',
                                '中': '<span class="label label-warning">中</span>',
                                '低': '<span class="label label-info">低</span>'
                            }
                        },
                        {
                            name: 'source',
                            label: '来源IP',
                            width: 120,
                            type: 'text'
                        },
                        {
                            name: 'description',
                            label: '事件描述',
                            width: 150,
                            type: 'text'
                        },
                        {
                            name: 'status',
                            label: '处理状态',
                            width: 100,
                            type: 'mapping',
                            map: {
                                '已处理': '<span class="label label-success">已处理</span>',
                                '已拦截': '<span class="label label-info">已拦截</span>',
                                '已扫描': '<span class="label label-secondary">已扫描</span>',
                                '已记录': '<span class="label label-light">已记录</span>',
                                '待处理': '<span class="label label-warning">待处理</span>'
                            }
                        }
                    ],
                    data: {
                        items: securityEvents,
                        total: securityEvents.length
                    },
                    showPager: true,
                    pageSize: 8
                }
            ];
            
            await monitorInstance.render(cards);
        }
        
        /**
         * 切换监控主题
         */
        async function toggleMonitorTheme() {
            const themes = ['default', 'dark'];
            const currentIndex = themes.indexOf(currentTheme);
            const nextIndex = (currentIndex + 1) % themes.length;
            const newTheme = themes[nextIndex];
            
            try {
                console.log(`[监控演示 v2.0] 切换主题: ${currentTheme} -> ${newTheme}`);
                
                // 切换页面主题
                document.body.classList.remove(`amis-cards-theme-${currentTheme}`);
                document.body.classList.add(`amis-cards-theme-${newTheme}`);
                
                // 切换实例主题
                if (monitorInstance && typeof monitorInstance.setTheme === 'function') {
                    await monitorInstance.setTheme(newTheme, false);
                }
                
                currentTheme = newTheme;
                console.log('[监控演示 v2.0] 主题切换完成:', currentTheme);
                
            } catch (error) {
                console.error('[监控演示 v2.0] 主题切换失败:', error);
            }
        }
        
        /**
         * 开始自动刷新
         */
        function startAutoRefresh() {
            if (refreshTimer) {
                clearInterval(refreshTimer);
            }
            
            refreshTimer = setInterval(() => {
                console.log('[监控演示 v2.0] 自动刷新数据');
                // 更新时间戳
                updateTimestamp();
                // 可以在这里更新其他动态数据
            }, 5000); // 5秒刷新一次
            
            console.log('[监控演示 v2.0] 自动刷新已启动');
            
            // 显示优雅的提示
            showToast('自动刷新已启动（5秒间隔）', 'success');
        }
        
        /**
         * 停止自动刷新
         */
        function stopAutoRefresh() {
            if (refreshTimer) {
                clearInterval(refreshTimer);
                refreshTimer = null;
                console.log('[监控演示 v2.0] 自动刷新已停止');
                showToast('自动刷新已停止', 'info');
            }
        }
        
        /**
         * 更新时间戳
         */
        function updateTimestamp() {
            // 这里可以实现更新特定卡片的逻辑
            // 例如更新"最近更新"字段
        }
        
        /**
         * 设置活动按钮
         */
        function setActiveButton(index) {
            const buttons = document.querySelectorAll('.monitor-controls button');
            // 获取场景切换按钮（前4个）
            const sceneButtons = Array.from(buttons).slice(0, 4);
            
            sceneButtons.forEach((btn, i) => {
                if (i === index) {
                    btn.classList.add('active');
                } else {
                    btn.classList.remove('active');
                }
            });
        }
        
        /**
         * 显示提示消息
         */
        function showToast(message, type = 'info') {
            const toast = document.createElement('div');
            toast.className = `toast toast-${type}`;
            toast.style.cssText = `
                position: fixed;
                top: 100px;
                right: 20px;
                padding: 1rem 1.5rem;
                background: rgba(255, 255, 255, 0.95);
                border-radius: 10px;
                box-shadow: 0 4px 20px rgba(0,0,0,0.15);
                backdrop-filter: blur(10px);
                border: 1px solid rgba(255,255,255,0.3);
                color: #2c3e50;
                font-weight: 600;
                z-index: 9999;
                transform: translateX(100%);
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            `;
            
            // 根据类型设置颜色
            const colors = {
                success: '#27ae60',
                info: '#3498db',
                warning: '#f39c12',
                error: '#e74c3c'
            };
            
            if (colors[type]) {
                toast.style.borderLeftColor = colors[type];
                toast.style.borderLeftWidth = '4px';
                toast.style.borderLeftStyle = 'solid';
            }
            
            toast.textContent = message;
            document.body.appendChild(toast);
            
            // 显示动画
            setTimeout(() => {
                toast.style.transform = 'translateX(0)';
            }, 100);
            
            // 自动隐藏
            setTimeout(() => {
                toast.style.transform = 'translateX(100%)';
                setTimeout(() => {
                    document.body.removeChild(toast);
                }, 300);
            }, 3000);
        }
        
        /**
         * 显示错误信息
         */
        function showError(title, message) {
            const container = document.getElementById('monitor-container');
            const errorHtml = `
                <div class="error-container">
                    <i class="fa fa-exclamation-triangle"></i>
                    <div style="font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem;">${title}</div>
                    <div style="font-size: 1rem; margin-bottom: 2rem; opacity: 0.9;">${message}</div>
                    <button onclick="location.reload()">
                        <i class="fa fa-redo"></i> 重新加载
                    </button>
                </div>
            `;
            container.innerHTML = errorHtml;
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('[监控演示 v2.0] 页面加载完成');
            
            // 使用轮询检查依赖
            let checkCount = 0;
            const maxChecks = 20;
            
            const checkAndInit = () => {
                checkCount++;
                
                if (typeof window.AmisCards !== 'undefined' && 
                    typeof window.AmisCards.InfoGridRenderer !== 'undefined') {
                    // 应用默认主题
                    document.body.classList.add(`amis-cards-theme-${currentTheme}`);
                    
                    // 初始化监控演示
                    initMonitorDemo();
                } else if (checkCount < maxChecks) {
                    setTimeout(checkAndInit, 200);
                } else {
                    showError('依赖加载失败', '请检查网络连接或脚本加载情况');
                }
            };
            
            checkAndInit();
        });
        
        // 页面卸载时清理定时器
        window.addEventListener('beforeunload', function() {
            stopAutoRefresh();
        });
    </script>
</body>
</html>